<nz-card nzSize="default" >
    <form (ngSubmit)="submit()"
          [formGroup]="form"
          nz-form
          role="form">
        <nz-tabset (nzSelectChange)="switch($event)"
                   [nzAnimated]="false"
                   class="tabs">
            <nz-tab [nzTitle]="'账户密码登录'">
                <!--      <nz-alert *ngIf = "error | async as err"-->
                <!--                [nzType] = "'error'"-->
                <!--                nzMessage = "登录失败!账号密码错误"-->
                <!--                [nzShowIcon] = "true"-->
                <!--                class = "mb-lg" ></nz-alert >-->
                <nz-form-item>
                    <nz-form-control nzErrorTip="用户名长度必须大于3">
                        <nz-input-group nzPrefixIcon="user"
                                        nzSize="large">
                            <input formControlName="userName"
                                   nz-input
                                   nzSize="large"
                                   placeholder="输入用户名"/>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control nzErrorTip="请输入你的密码">
                        <nz-input-group nzPrefixIcon="lock"
                                        nzSize="large">
                            <input formControlName="password"
                                   nz-input
                                   nzSize="large"
                                   placeholder="输入密码"
                                   type="password"/>
                        </nz-input-group>
                    </nz-form-control>
                </nz-form-item>
            </nz-tab>
<!--            <nz-tab [nzTitle]="'手机号登录'">-->
<!--                <nz-form-item>-->
<!--                    <nz-form-control>-->
<!--                        <nz-input-group nzPrefixIcon="user"-->
<!--                                        nzSize="large">-->
<!--                            <input formControlName="mobile"-->
<!--                                   nz-input-->
<!--                                   placeholder="输入您的手机号"/>-->
<!--                        </nz-input-group>-->
<!--                        <nz-form-explain *ngIf="mobile.dirty && mobile.errors">-->
<!--                            <ng-container *ngIf="mobile.errors.required">-->
<!--                                请输入手机号！-->
<!--                            </ng-container>-->
<!--                            <ng-container *ngIf="mobile.errors.pattern">-->
<!--                                手机号格式错误！-->
<!--                            </ng-container>-->
<!--                        </nz-form-explain>-->
<!--                    </nz-form-control>-->
<!--                </nz-form-item>-->
<!--                <nz-form-item>-->
<!--                    <nz-form-control>-->
<!--                        <nz-row [nzGutter]="8">-->
<!--                            <nz-col [nzSpan]="16">-->
<!--                                <nz-input-group nzPrefixIcon="mail"-->
<!--                                                nzSize="large">-->
<!--                                    <input formControlName="captcha"-->
<!--                                           nz-input-->
<!--                                           placeholder="输入验证码"/>-->
<!--                                </nz-input-group>-->
<!--                                <nz-form-explain *ngIf="captcha.dirty && captcha.errors">-->
<!--                                    请输入验证码！-->
<!--                                </nz-form-explain>-->
<!--                            </nz-col>-->
<!--                            <nz-col [nzSpan]="8">-->
<!--                                <button-->
<!--                                        (click)="getCaptcha()"-->
<!--                                        [disabled]="count"-->
<!--                                        nz-button-->
<!--                                        nzBlock-->
<!--                                        nzSize="large"-->
<!--                                        type="button"-->
<!--                                >-->
<!--                                    {{ count ? count + 's' : ('获取验证码') }}-->
<!--                                </button>-->
<!--                            </nz-col>-->
<!--                        </nz-row>-->
<!--                    </nz-form-control>-->
<!--                </nz-form-item>-->
<!--            </nz-tab>-->
        </nz-tabset>
        <nz-form-item>
            <nz-col [nzSpan]="12">
                <label formControlName="remember" nz-checkbox>自动登录</label>
            </nz-col>
            <nz-col [nzSpan]="12"
                    class="text-right">
                <a (click)="msg.error('请找欧阳锋')"
                   class="forgot">忘记密码</a>
            </nz-col>
        </nz-form-item>
        <nz-form-item>
            <button nz-button
                    nzBlock
                    nzSize="large"
                    nzType="primary"
                    type="submit">
                登录
            </button>
        </nz-form-item>
    </form>
    <div class="other">
        其他登录方式 <i
            (click)="open('auth0', 'window')"
            class="icon"
            nz-icon
            nz-tooltip="微信扫描二维码登录"
            nzType="wechat"></i>
    </div>
</nz-card>
